<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :title="ruleForm.id === 0 ? '新增食材' : '编辑食材'"
      width="500"
      :before-close="handleClose"
    >
      <div>
        <el-form
          ref="ruleFormRef"
          style="max-width: 400px"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          status-icon
        >
          <el-form-item label="物料名称" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入物料名称" clearable />
          </el-form-item>
          <el-form-item label="单位" prop="unit">
            <el-select v-model="ruleForm.unit" placeholder="请选择" clearable>
              <el-option label="斤" value="斤" />
              <el-option label="吨" value="吨" />
              <el-option label="个" value="个" />
              <el-option label="克" value="克" />
            </el-select>
          </el-form-item>
          <el-form-item label="供应商" prop="supplierId">
            <el-select
              v-model="ruleForm.supplierId"
              placeholder="请选择"
              clearable
              @change="handelCheck"
            >
              <el-option v-for="item in supplierData" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { supplierList } from "@/api/diet/supplier/supplier";
import { foodAddParams } from "@/api/diet/food/type";
import { supplierListData } from "@/api/diet/supplier/type";
import { foodsAdd, foodsEdit } from "@/api/diet/food/food";
import dayjs from "dayjs";

const dialogVisible = ref(true);

const ruleForm = reactive<foodAddParams>({
  id: 0,
  name: "",
  unit: "",
  supplierId: undefined,
  updateTime: "",
});

const props = withDefaults(defineProps<{ listParams: foodAddParams }>(), {
  listParams: () => ({
    id: 0,
    name: "",
    unit: "",
    supplierId: undefined,
  }),
});
Object.assign(ruleForm, props.listParams);

// 供应商列表
const supplierData = ref<supplierListData[]>([]);
const getSupplierList = async () => {
  let res = await supplierList({ page: 1, pageSize: 1000 });
  console.log("供应商", res);
  supplierData.value = res.list;
};
const handelCheck = (val: number) => {
  ruleForm.supplierId = val;
};

// 添加
const submitForm = async () => {
  let res = await foodsAdd(ruleForm);
  console.log("添加", res);
  ElMessage.success("添加成功");
  emit("close");
};

// 修改
const update = async () => {
  console.log("ruleForm", ruleForm);
  let res = await foodsEdit(ruleForm);
  ElMessage.success("修改成功");
  emit("close");
};

const submit = async () => {
  ruleFormRef.value?.validate(async (valid) => {
    if (valid) {
      // submitForm()
      ruleForm.id === 0 ? await submitForm() : await update();
    }
  });
};

// 表单校验
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules<foodAddParams>>({
  name: [{ required: true, message: "请输入食材名称", trigger: "blur" }],
  unit: [
    {
      required: true,
      message: "请选择单位",
      trigger: "change",
    },
  ],
  supplierId: [
    {
      required: true,
      message: "请选择供应商",
      trigger: "change",
    },
  ],
});

// 关闭弹框
const emit = defineEmits(["close"]);
const handleClose = () => {
  emit("close");
};

onMounted(() => {
  getSupplierList();
});
</script>

<style scoped lang="less"></style>
